<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl"/>
    <link rel="stylesheet" href="/js/plugins/treeview/dist/bootstrap-treeview.css" type="text/css"/>
    <script type="text/javascript" src="/js/plugins/treeview/dist/bootstrap-treeview.js"></script>

    <script>
        $(function () {
            $.get("/region/listByParentId.do", function (data) {
                $("#treeview").treeview({
                    color: "#428bca",
                    showTags: true,
                    /*data: [{text:"全部地区",nodes:defaultData}] */
                    data: [{text: "全部地区", nodes: data}],
                    //点击+图标触发lazyLoad函数
                    lazyLoad: function (node) {
                        //node代表当前节点
                        $.get("/region/listByParentId.do", {"parentId": node.id}, function (subData) {
                            //将返回子节点挂在父节点:node
                            //添加子节点
                            //参数1:addNode是固定语法
                            //参数2:[] 第一个子节点 第二个父节点
                            $("#treeview").treeview('addNode', [subData, node]);
                        })
                    },
                    onNodeSelected: function (event, node) {
                        parentNode = node;
                        $.get("/region/listByParentId.do", {"parentId": node.id}, function (subData) {
                            //定义一个空值html
                            var html = "";
                            //遍历子数据获取的数据
                            $.each(subData, function (index, ele) {
                                //拼接列表,因为用map重新封装过属性,所以名字变成text
                                html += "<tr><td>" + (index + 1) + "</td><td>" + ele.text + "</td><td><a href='javascript:;' class='updateReg' data-json='" + ele.json + "'>编辑</a></td></tr>"
                            })
                            //不用append是因为要每次都覆盖而不是拼接
                            $("#tbody").html(html)

                        })
                    }
                })
            })
            //动态绑定jquery事件
            $("#tbody").on("click", ".updateReg", function () {
                //或的被选中的那个节点
                var parentNode = $("#treeview").treeview('getSelected')[0]
                //情空表单
                $("#editForm").clearForm(true);
                //展示模态框
                $("#inputModal").modal('show')
                var json = $(this).data("json")
                if (json) {
                    $("#editForm input[name='id']").val(json.id)
                    $("#editForm input[name='parentName']").val(parentNode.text)
                    $("#editForm input[name='name']").val(json.name)
                    $("#editForm select[name='state']").val(json.state)
                    $("#editForm input[name='parentId']").val(json.parentId)

                }
            })

            $(".saveBtn").click(function () {
                console.log(111);
                $("#editForm").ajaxSubmit(function (data) {
                    if (data.success) {
                        location.href = "/region/list.do"
                    } else {
                        alert(data.msg)
                    }
                })
            })
            $("#inputBtn").click(function () {
                //或的被选中的那个节点
                var parentNode = $("#treeview").treeview('getSelected')[0]
                //情空表单
                $("#editForm").clearForm(true);
                //展示模态框
                $("#inputModal").modal('show')
                //回显上级
                if (parentNode) {
                    $("#editForm input[name='parentName']").val(parentNode.text)
                    $("#editForm input[name='parentId']").val(parentNode.id)
                }
            })

        })

    </script>
</head>
<body>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
        <#--设置当前要回显当前菜单,必须在载人菜单前完成设置-->
            <#assign menu="region"/>
            <#include "../common/menu.ftl"/>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">旅游地区管理</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div id="treeview"></div>
                </div>
                <div class="col-sm-8">
                    <button id="inputBtn" class="btn btn-info">
                        <span class="glyphicon glyphicon-plus"></span>添加地区
                    </button>
                    <table class="table table-striped table-hover">
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tbody id="tbody">

                        </tbody>
                    </table>
                <#--<#include "../common/page.ftl"/>-->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    编辑
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/region/save.do" method="post" id="editForm">
                    <input type="hidden" name="id">
                    <input type="hidden" name="parentId">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">上级地区：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="parentName" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">地区名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name"
                                   placeholder="请输入地区的名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="col-sm-6">
                            <select name="state" class="form-control">
                                <option value="1">推荐</option>
                                <option value="0">不推荐</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary saveBtn">
                    <span class="glyphicon glyphicon-saved"></span> 提交更改
                </button>
            </div>
        </div>
    </div>
</div>

</body>
</html>